<template>
  <el-row :gutter="20">
    <el-col :span="4">
      <div class="grid-content bg-purple">&emsp;&emsp;&emsp;</div>
    </el-col>
    <el-col :span="16">
      <div class="grid-content bg-purple">
        <div class="aa" style="width:500px">
          <el-form ref="form" label-width="80px">
            <el-form-item label="字典名称">
              <el-input v-model="form.dictName" placeholder="请输入名称"></el-input>
            </el-form-item>

            <el-form-item label="字典类型">
              <el-select v-model="form.dictType" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.dictName"
                  :label="item.dictName"
                  :value="item.dictTypeId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="字典值">
              <el-input v-model="form.dictValue" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-radio v-model="form.dictStatus" label="0">开启</el-radio>
              <el-radio v-model="form.dictStatus" label="1">关闭</el-radio>
            </el-form-item>

            <el-form-item label="是否是系统菜单">
              <el-switch v-model="form.issys" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </el-form-item>

            <el-form-item label="字典编码">
              <el-input v-model="form.dictCode" placeholder="请输入编码"></el-input>
            </el-form-item>
            <el-form-item label="排序">
              <el-input-number
                v-model="form.sort"
                @change="handleChange"
                :min="form.sort"
                :max="100000000"
                label="描述文字"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="描述">
              <el-input type="textarea" v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button @click="next">返回</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-col>
    <el-col :span="4">
      <div class="grid-content bg-purple">&emsp;&emsp;&emsp;</div>
    </el-col>
  </el-row>
</template>
<script>
import dictType from "@/api/dictType";
import dict from "@/api/dict";
export default {
  data() {
    return {
      form: {
        dictType: "",
        sort: 0,
        dictCode: "",
        dictName: "",
        dictStatus: "0",
        dictValue: "",
        remark: "",
        issys:false
      },
      options: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    handleChange(value) {
      this.form.sort = value;
    },
    onSubmit() {
      dict.save(this.form).then(response => {
        this.$router.push({ path: "/stuteacher/dict" });
      });
    },
    init() {
      this.list();
      // debugger
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id;
        //回显
        this.getByid(id);
      } else {
      }
    },

    list() {
      dictType.list().then(response => {
        this.options = response.data.data;
      });
    },
    getByid(id) {
      // debugger
      dict.getbyid(id).then(response => {
        console.log(response);
        this.form = response.data.data;
      });
    },
    next() {
      this.$router.push({
        path: "/stuteacher/dict"
      });
    }
  }
};
</script>
<style >
.aa {
  margin: 40px;
}
</style>